<template>
    <div>
      <h1>{{ msg }}</h1>
  
      <!-- 分割线 -->
      <el-divider></el-divider>
  
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="accountType" label="账目类型"></el-table-column>
  
        <el-table-column prop="accountDesc" label="账目描述"></el-table-column>
  
        <el-table-column prop="accountMoney" label="账目金额"></el-table-column>
  
        <el-table-column prop="createTime" label="日期"></el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    name: 'VueTest',
    data() {
      return {
        msg: '开心记账本',
        tableData: [],
      }
    },
  
    methods: {
  
      //加载列表数据
      loadTableData() {
        //发请求给后台
        this.$http.get("/account/getAllAccount", {}).then(response => {
          this.tableData = response.data.data;
          //打印数据在控制台
          console.log(this.tableData);
        });
      },
  
    },
  
    //钩子函数(页面初始化时，钩子函数就会被执行)
    mounted() {
      this.loadTableData();
    }
  
  }
  </script>
  
  <style scoped>
  </style>